<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GPT口语训练师</title>
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="img/bitbug_favicon.ico" type="img/bitbug_favicon.ico">
    <!--看板娘 -自定义大小，隐藏对话框和对话框高度-->
    <style type="text/css">
        #waifu #live2d {
            height: 300px!important;
            width: 300px!important;
        }
        #waifu-tips {
            top: -60px;
            /*display:none !important; #隐藏对话框*/
        }
        .logo {
            position: absolute;
            top: 10px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-image: url(img/logo_transparent.png);
            background-size: cover;
            margin-left: 120px;
        }
    </style>
    <!--看板娘加载指定模型-->

    <script>
        localStorage.setItem('modelId', '2');
        localStorage.setItem('modelTexturesId', '3');
    </script>

    <!--配置看板娘左右位置-->

    <script src="https://api.itggg.cn/live2dnew/left/index.js"> </script>
</head>
<body>
<div class="logo"></div>
<div class="loginbody">
    <div class="fixed" id="content">
        <h1 style="color: #ebb563">基于GPT模型的英语口语训练</h1>
        <div class="form-demo">
            <!-- 旋转开关 -->
            <div class="switch"><h2>没有/已有账号？</h2></div>
            <input type="checkbox" style="display: none;" id="change">
            <label for="change">切 换</label>

            <div class="turn">
                <div class="over">
                    <form action="" class="login">
                        <h1>登 录</h1>
                        <input type="text" id="username" placeholder="用户名">
                        <input type="password" id="password" placeholder="密码">
                        <input type="button" class="btn" onclick="getuser()" value="登 录">
                    </form>
                    <form action="" class="sign">
                        <h1>注 册</h1>
                        <input type="text" id="user0" placeholder="用户名">
                        <input type="password" id="password0" placeholder="密码">
                        <input type="password" id="password1" placeholder="确认密码">
                        <input type="button" id="zc" class="btn" value="注 册">
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container" id="container">
        <div class="sidebar">
            <div class="logo"></div>
            <div id="app">
                <div class="functions" id="functions">
                    <el-button type="primary" plain  id="a">自由模式</el-button>
                    <el-button type="success" plain  id="b">情景模式</el-button>
                    <el-button type="warning" plain  id="c">模拟训练</el-button>
                    <el-button type="info" plain     id="d">用户中心</el-button>
                </div>
            </div>
        </div>
        <div class="chatbox">
            <!--        这是工具栏部分-->
            <div class="toolbar">
                <div class="dropdown">
                    <select id="fenlei">
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                    </select>
                </div>
                <div class="dropdown">
                    <select id="wenz">
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                    </select>
                </div>
                <div class="dropdown">
                    <button id="begain_qing" class="buttons">开始</button>
                </div>

                <h1 id="moshi">情景模式</h1>
                <div class="spacer"></div>
                <button><i class="fa fa-plus"></i></button>
                <button><i class="fa fa-edit"></i></button>
                <button><i class="fa fa-trash"></i></button>
            </div>
            <div class="chatlog" id="msg-div">
            </div>
            <div class="chat-input">
                <input type="text" placeholder="Type your message..." id="inputTxt">
                <div class="buttons">
                    <button class="send-btn" id="send">发送</button>
                    <button class="voice-btn" id="startButton">语音输入</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })
</script>
<script type="text/javascript" src="js/ws.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/audio.js"></script>
</body>

</html>